import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ichinesereader/controller/knowledgeword.dart';

import '../../themes/appTheme.dart';

// ignore: must_be_immutable
class WordCardSettingDialog extends StatefulWidget {
  WordCardSettingDialog({
    Key? key,
    required this.title,
  }) : super(key: key);

  String title;

  @override
  State<StatefulWidget> createState() => _WordCardSettingState();
}

class _WordCardSettingState extends State<WordCardSettingDialog> {
  KnowledgeWordsController controller = Get.find();

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            this.widget.title,
            style: TextStyle(
                fontSize: 30.0,
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.dotted),
          ),
          InkWell(
            onTap: () {
              controller.updateSetting();
              Navigator.of(context).pop();
            },
            child: Icon(Icons.cancel,
                color: Get.isDarkMode ? Colors.white : Colors.blueGrey),
          ),
        ],
      ),
      titleTextStyle: TextStyle(
          letterSpacing: 1,
          color: Get.isDarkMode ? Get.theme.primaryColorDark : Colors.blueGrey,
          fontSize: 21.0),
      backgroundColor:
          Get.isDarkMode ? AppTheme.colors.darkTheme2 : Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(6.0),
        ),
      ),
      content: Container(
        height: 300,
        width: 450,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12.0),
                  child: Row(
                    children: [
                      Switch(
                          // This bool value toggles the switch.
                          value: controller.ifWord.value,
                          activeColor: Get.isDarkMode
                              ? Colors.white
                              : Get.theme.primaryColor,
                          activeTrackColor: Get.isDarkMode
                              ? Colors.black
                              : Get.theme.primaryColor.withOpacity(0.3),
                          inactiveThumbColor: Get.isDarkMode
                              ? Get.theme.primaryColor
                              : Colors.grey,
                          inactiveTrackColor:
                              Get.isDarkMode ? Colors.black : Colors.grey[300],
                          onChanged: (bool value) {
                            // This is called when the user toggles the switch.
                            setState(() {
                              controller.ifWord.value = value;
                            });
                          }),
                      Text(
                        'Word',
                        style: TextStyle(
                            color: Get.isDarkMode
                                ? Get.theme.primaryColorDark
                                : Colors.blueGrey),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12.0),
                  child: Row(
                    children: [
                      Switch(
                          // This bool value toggles the switch.
                          value: controller.ifPinyin.value,
                          activeColor: Get.isDarkMode
                              ? Colors.white
                              : Get.theme.primaryColor,
                          activeTrackColor: Get.isDarkMode
                              ? Colors.black
                              : Get.theme.primaryColor.withOpacity(0.3),
                          inactiveThumbColor: Get.isDarkMode
                              ? Get.theme.primaryColor
                              : Colors.grey,
                          inactiveTrackColor:
                              Get.isDarkMode ? Colors.black : Colors.grey[300],
                          onChanged: (bool value) {
                            // This is called when the user toggles the switch.
                            setState(() {
                              controller.ifPinyin.value = value;
                            });
                          }),
                      Text(
                        'Pinyin',
                        style: TextStyle(
                            color: Get.isDarkMode
                                ? Get.theme.primaryColorDark
                                : Colors.blueGrey),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12.0),
                  child: Row(
                    children: [
                      Switch(
                          // This bool value toggles the switch.
                          value: controller.ifDefinition.value,
                          activeColor: Get.isDarkMode
                              ? Colors.white
                              : Get.theme.primaryColor,
                          activeTrackColor: Get.isDarkMode
                              ? Colors.black
                              : Get.theme.primaryColor.withOpacity(0.3),
                          inactiveThumbColor: Get.isDarkMode
                              ? Get.theme.primaryColor
                              : Colors.grey,
                          inactiveTrackColor:
                              Get.isDarkMode ? Colors.black : Colors.grey[300],
                          onChanged: (bool value) {
                            // This is called when the user toggles the switch.
                            setState(() {
                              controller.ifDefinition.value = value;
                            });
                          }),
                      Text(
                        'Definition',
                        style: TextStyle(
                            color: Get.isDarkMode
                                ? Get.theme.primaryColorDark
                                : Colors.blueGrey),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            // MaterialButton(
            //   color: Get.isDarkMode
            //       ? Colors.white
            //       : Get.theme.primaryColorDark,
            //   textColor: Get.isDarkMode
            //       ? Colors.black
            //       : Get.theme.primaryColorLight,
            //   onPressed: () {
            //     controller.updateSetting();
            //     Navigator.of(context).pop();
            //   },
            //   child: Text(
            //     'Close'.tr,
            //     style: TextStyle(
            //         color: Get.isDarkMode
            //             ? Colors.black
            //             : Get.theme.primaryColorLight),
            //   ),
            // ),
          ],
        ),
      ),
    );
  }
}
